/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="task-log__table">
        <sf-button class="btn-blank creat-button m-b10"
                   icon-cls="iconrefresh"
                   @click="_refresh">
            <lang>刷新</lang>
        </sf-button>
        <div class="table-data">
            <sf-grid>
                <sf-table 
                    ref="taskLogTable" 
                    :options="options_fix">
                    <sf-table-column data-index="name"
                                     :default-width="60">
                        <lang>名称</lang>
                    </sf-table-column>
                    <sf-table-column data-index="status"
                                     :default-width="60">
                        <lang>状态</lang>
                    </sf-table-column>
                    <sf-table-column data-index="opr"
                                     :default-width="60">
                        <lang>查看</lang>
                    </sf-table-column>
                    <template slot="status"
                              slot-scope="{record}">
                        <div class="task-flex"
                             :class="repositoryStatusClass(record.status)">
                            <span class="status-img task-common"></span>
                            <span class="status-text">{{ repositoryStatusText(record.status) }}</span>
                        </div>
                    </template>
                    <template slot="opr"
                              slot-scope="{record}">
                        <div class="opr">
                            <a 
                                class="link-btn"
                                @click="_previewLog(record)">
                                <lang>查看日志</lang>
                            </a>
                        </div>
                    </template>
                </sf-table>
            </sf-grid>
        </div>
    </div>
</template>
<script>


import trainingUrlAdapter from 'src/home/mod_common/training_url_adapter';
import PreviewLog from 'src/components/preview_log.vue';

/*训练状态*/
const REPOSITORY_STATUS_TEXT = {
    Succeeded:_('已成功'),
    Pending:_('运行中'),
    Running:_('运行中'),
    Failed:_('已失败')
};
const REPOSITORY_STATUS_CLASS = {
    Succeeded:'task-success',
    Pending:'task-run',
    Failed:'task-fail',
    Running:'task-run'
};

const PAGE_COUNT = 10;


export default {
    name: 'TaskLogTable',
    data () {
        return {
            searchParams: {
                keyword: '',
                pageSize: PAGE_COUNT,
                pageNum: 0
            },
            options_fix: {
                bufferView: false,

                // 配置这个后才可以实现保持勾选状态
                idProperty: 'id',
                selectionHide: true
            },
            name:'',
            tableData:[],
            taskId:''
        };
    },
    computed: {
        projectId () {
            return this.$route.query.projectId || '';
        }
    },
    watch: {
        tableData:{
            deep:true,
            handler () {
                let table = this.$refs.taskLogTable;
                this.$nextTick(()=>{
                    table && table.loadData(this.tableData || []);
                });
            }
        }
    },
    methods: {
        async _refresh () {
            const TABLE_LOG_URL = trainingUrlAdapter(`task/${this.taskId}/workflow`);
            this.$mask();
            let jsonData = await this.$ajax.get(TABLE_LOG_URL);
            this.$unmask();
            let {success, msg, data} = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                return;
            };
            let table = this.$refs.taskLogTable;
            table && table.loadData(data);
        },

        // 刷新grid
        // async refreshGrid () {
        //     let table = this.$refs.taskLogTable;
        //     this.$nextTick(()=>{
        //         table.loadData(this.tableData);
        //     });
        // },
        _createPreviewLogForm () {
            if (!this.previewLogForm) {
                this.previewLogForm = this.$modal(PreviewLog, {
                    autoDestory: true
                });
            }
            return this.previewLogForm;
        },
        async _previewLog (record) {
            let formWin = this._createPreviewLogForm();
            const LOGURL = trainingUrlAdapter(`task/${this.taskId}/workflow/${record.id}/log`);
            let jsonData = await this.$ajax.get(LOGURL, {status:record.status});
            formWin.$unmask();
            let {success, msg, data} = jsonData;
            if (!success) {
                return this.$showErr(msg || _('保存失败'));
            }
            if (!data) {
                this.$warn(_('当前还未产生日志，请稍候重试'), { autoHide: true });
                return false;
            }
            formWin.open({
                reset: true,
                title: _('查看日志详情'),
                buttons:[''],
                footer:false,
                data:{
                    logList:data.split(/\n/)
                }
            });
        },
        setJsonValue (data, id) {
            this.tableData = data;
            this.taskId = id;
        },
        repositoryStatusClass (status) {
            return REPOSITORY_STATUS_CLASS[status];
        },
        repositoryStatusText (status) {
            return REPOSITORY_STATUS_TEXT[status];
        }
      
    }
  
};
</script>
<style lang="less">
    .task-log__table{
        width: 650px;
        height: 320px;
        padding: 0 10px 10px;
        overflow: auto;
        .table-data {
            height: calc(100% - 32px);
            .sfv-grid {
                /* border: none; */
                height: 100%;
                display: flex;
                flex-direction: column;

                .sfv-table {
                    flex: 1;
                }
            }
    
            .task-flex{
                display: flex;
                align-items: center;
            }
        }
    }
</style>
  